<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>编号</th>
          <th>时间</th>
          <th>地址</th>
          <th>数量</th>
          <th>价格</th>
          <th>总价</th>
          <th>按钮</th>
        </tr>
      </thead>
      <template v-if="arr.length > 0">
        <tbody>
          <tr v-for="(item, index) in arr">
            <td>{{ item.pid }}</td>
            <td>{{ item.ptime }}</td>
            <td>{{ item.paddr }}</td>
            <td>
              <button @click="minus($event, index)">-</button><span>{{ item.count }}</span
              ><button @click="add($event, index)">+</button>
            </td>
            <td>{{ item.price }}</td>
            <td>{{ item.count * item.price }}</td>
            <td><button @click="del($event, item.pid)">删除</button></td>
          </tr>
          <tr>
            <td>总价为：</td>
            <td colspan="6">{{ allprice() }}</td>
          </tr>
        </tbody>
      </template>
      <template v-else>
        <tr>
          <td colspan="7">暂无数据</td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
/*
作业:
将 arr 数组 使用table展示


1) 每行最末中包含 一个删除按钮， 点击删除按钮可删除对应的数据行，当数据删除完毕后显示“暂无数据”
2) count 为购买数量，通过在count展示的数据列左右两边设置 - 、+ 两个按钮 点击 – 按钮减少 1张票 点击 + 增加 1 张票，更改票数的同时，购买票据的总价也需实时更新展示。
*/
import { ref } from "vue";
export default {
  setup() {
    let arr = ref([
      {
        pid: "w-001",
        ptime: "2022-01-10 22:00:00",
        paddr: "长沙 -- 北京",
        count: 2,
        price: 1000,
      },
      {
        pid: "w-002",
        ptime: "2022-01-10 08:00:00",
        paddr: "长沙 -- 广州",
        count: 5,
        price: 800,
      },
      {
        pid: "w-003",
        ptime: "2022-01-10 14:00:00",
        paddr: "长沙 -- 云南",
        count: 3,
        price: 600,
      },
    ]);

    // 所有总价
    let allprice = () => {
      return arr.value.reduce((acc, item) => (acc += item.price * item.count), 0);
    };

    //删除按钮
    let del = (e, it) => {
      // 传统方法
      // arr.value.splice(
      //   arr.value.findIndex((item) => item.pid == it),
      //   1
      // );

      // 过滤方法
      arr.value = arr.value.filter((item) => item.pid != it);
    };

    // 添加按钮
    let add = (e, _index) => {
      arr.value[_index].count++;
    };

    // 减少按钮
    let minus = (e, _index) => {
      if (arr.value[_index].count > 0) arr.value[_index].count--;
      else {
        console.log("数量最少为0");
      }
    };
    return { arr, allprice, del, add, minus };
  },
};
</script>

<style>
table {
  width: 800px;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: bottom;
}
</style>
